import React, { useMemo } from "react";
import styles from "../css/navdate.module.css";
import { Button } from "antd-mobile";
import dayjs from "dayjs";
import { useSearchParams } from "react-router-dom";
function Index(props) {
  let [sp, setSp] = useSearchParams();
  let obj = useMemo(() => Object.fromEntries(sp), [sp]);
  const setDate = (num) => {
    let now = dayjs(props.date).add(num, "day").format("YYYY-MM-DD");
    setSp({ ...obj, date: now });
  };
  return (
    <div className={styles.box}>
      <Button
        color="primary"
        fill="none"
        size="mini"
        onClick={() => setDate(-1)}
        disabled={Math.ceil(dayjs(props.date).diff(dayjs(), "day", true)) <= 0}
      >
        前一天
      </Button>
      <span className={styles.date}>{props.date}</span>
      <Button
        color="primary"
        fill="none"
        size="mini"
        onClick={() => setDate(1)}
        disabled={Math.ceil(dayjs(props.date).diff(dayjs(), "day", true)) >= 14}
      >
        后一天
      </Button>
    </div>
  );
}

export default Index;
